<template>
  <div  class="dj-item">
    <div class="list">
      <el-row>
        <el-col  :key="index" v-for="(item,index) in data" :span="6">
          <div class="itme">
            <img :src="item.Image"/>
            <p>{{item.ItemName}}</p>
          </div>
        </el-col>
      </el-row>
      <el-pagination :current-page.sync="currentPage"  v-if="pageCount" @current-change="getItemList" class="pagination"

        background
        layout="prev, pager, next"
        :total="pageCount">
      </el-pagination>
      <div   class="noneText" v-else>暂无</div>
    </div>

  </div>
</template>
<script>
  import {mapMutations} from 'vuex'
  export default {
    // 服务器与vuex同步
    async fetch(context) {
      console.log(context.params)
      // 假设从服务器获取到数据，需要与vuex的数据进行同步
      // let asyncData = 9;
      // context.store.dispatch('getCondition', {num: asyncData});
      let data = await context.app.$axios.get('http://box.imapic.cn/itemapi/api/item/dropdown');
      context.store.dispatch('setCondition', data.data.Data);

    },
    // nuxt中提供ajax请求数据，后再渲染
    async asyncData(context) {

      // 客户端渲染时的created
      // let { data :{ message  } } = await context.app.$axios.get('https://www.sinya.online/api/getlunbo');
      // 此函数中属于服务器的，发请求是由服务器发起，然后，把数据和页面进行渲染，返回整个页面给浏览器
      let data = await context.app.$axios.get('http://box.imapic.cn/itemapi/api/item/List?menuId=1&pageIndex=1&pageSize=12&itemName=');
      // return的结果，会和data组合
      this.pageCount = data.data.Data.PageCount;

      return { data:  data.data.Data.List}
    },
    // 服务端与客户端华丽的分割线========================================
    // 客户端渲染
    created() {

      // this.$axios.get('https://www.sinya.online/api/getlunbo')
      // .then(res=>{
      //   this.client_text = res.data.message;
      // })
    },
    mounted(){
      this.setItemNameSearch((itemName)=>{
        if( typeof itemName == 'string'){
          this.itemName = itemName;
          this.getItemList(1);
        }else {
          this.pram = itemName;
          this.getItemList(1);
        }
      });
    },
    data() {
      return {
        pageCount:pageCount,
        data: [] ,
        itemName:'',
        currentPage:1
      }
    },
    methods:{
      async getItemList(index,pram={}){
        this.currentPage = index;
        if(this.pram){
          pram = this.pram
        }
        let data = await this.$axios.get('http://box.imapic.cn/itemapi/api/item/List?menuId=1&pageSize=12&pageIndex='+index+'&itemName='+this.itemName+'&TypeId='+pram.TypeId+'&ColorId='+pram.ColorId);
        // return的结果，会和data组合
        this.pageCount = data.data.Data.PageCount;
        this.data =   data.data.Data.List;
      },
      ...mapMutations({
        setItemNameSearch: 'setItemNameSearch'
      })
    },
    components: {

    }
  }
</script>

<style lang="scss" >
  .dj-item{
    .list{
      .itme{
        margin: 10px 0;
        margin-right: 10px;
        background-color: #ffffff;

        img{
          width: 100%;
          height: 204px;
        }
        p{
          font-size: 14px;
          text-align: center;
          line-height: 30px;
        }
        &.itme:nth-child(1){
          margin-left: 10px;
        }
        &.itme:nth-child(4*n){
          margin-right: 0 !important;
        }
      }
      .pagination{
        text-align: center;
        padding: 20px;
      }
      .noneText{
        text-align: center;
        font-size: 32px;
        line-height: 64px;
      }
    }
  }
</style>
